<template>
	<div>
		<el-form :inline="true"  style="padding-top: 10px;padding-left: 5px;">
			<el-form-item label="查询条件" prop="parameter" label-width="80px">
				<el-input v-model="parameter" style="width: 200px;" placeholder="请输入尺码编号/尺码名称"></el-input>
			</el-form-item>
			<el-form-item>
				<div style="float: left;">
					<el-button type="primary" @click="querybutton">查询</el-button>
				</div>
			</el-form-item>
			<el-form-item>
				<div style="float: left;margin-left: -10px;">
					<el-button type="primary" @click="addsizebutton">新增尺码</el-button>
				</div>
			</el-form-item>
		</el-form>
		<el-table :data="sizeData" showOverflowTooltip style="width: 100%" stripe border tooltip-effect="dark">
			<!--<el-table-column type="selection" width="50" > </el-table-column>-->
			<el-table-column prop="size_id" label="尺码编号" show-overflow-tooltip></el-table-column>
			<el-table-column prop="size_name" label="尺码" show-overflow-tooltip></el-table-column>
			<el-table-column prop="size_type" label="尺码类型" show-overflow-tooltip></el-table-column>
			<el-table-column label="操作" width="160">
				<template slot-scope="scope">
					<el-button size="small" type="primary" @click="showServerEdit(scope.$index,scope.row)">编辑</el-button>
					<el-button size="small" type="primary" @click="delServerEdit(scope.$index,scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		
		<el-dialog :title="text" :visible.sync="dialogUpdate" width="40%">
			<el-form :model="form" label-width="120px">
				<el-form-item label="尺码编号：">
					<el-input v-model="form.size_id" :disabled="text=='修改尺码'"></el-input>
				</el-form-item>
				<el-form-item label="尺码名称：">
					<el-input v-model="form.size_name"></el-input>
				</el-form-item>
				<el-form-item label="尺码类型：">
					<el-select v-model="form.size_type" placeholder="请选择" filterable style='width:100%'>
						<el-option v-for="item in typeData" :key="item.type_id" :label='item.label' :value="item.type_id">
						</el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogUpdate = false">取 消</el-button>
				<el-button type="primary" @click="updateButton">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import { selectallsize,selectsizebyid,updatesize,deletesize,createsize } from '../../api/goods.js'
	export default {
		data() {
			return {
				sizeData:[],
				parameter:'',
				dialogUpdate:false,
				form:{
					// zkey:'',
					size_id:'',
					size_name:'',
					size_type:''
				},
				typeData:[
					{'type_id':'1','label':'身高型'},
					{'type_id':'2','label':'身材型'},
				],
				text:''
			};
		},
		methods:{
			querybutton(){
				if(this.parameter == ''){
					this.get_sizeList();
				}else{
					this.sizeData = [];
					selectsizebyid({parameter:this.parameter}).then(response => {
						 if(response.code ==0 ){
							this.sizeData = response.data;
						}
					})
				}
			},
			showExport(){
				
			},
			get_sizeList() {
			  selectallsize().then(response => {
			     if(response.code ==0 ){
			    	this.sizeData = response.data;
			    }
			  })
			},
			addsizebutton(){
				this.text = '新增尺码';
				this.dialogUpdate = true;
				this.form.size_id = '';
				this.form.size_name = '';
				this.form.size_type = '';
			},
			showServerEdit(index, row) {
				this.text = '修改尺码';
				this.dialogUpdate = true;
				this.form.zkey = row.zkey;
				this.form.size_id = row.size_id;
				this.form.size_name = row.size_name;
				this.form.size_type = row.size_type;
				// this.selectRow=row;
			},
			updateButton(){
				if(this.text == '新增尺码'){
					for(let i=0;i<this.sizeData.length;i++){
						if(this.form.size_id == this.sizeData[i].size_id){
						 this.$notify({
							  title: '警告',
							  message: '尺码id已存在',
							  type: 'info',
							})
							return ;
						}
					}
					if(this.form.size_id == '' || this.form.size_name == '' || this.form.size_type == ''){
						this.$notify({
							  title: '警告',
							  message: '请填写完整信息',
							  type: 'info',
							})
							return ;
					}
					createsize(this.form).then(response => {
						console.log(response,'response')
					  this.$notify({
					    title: '成功',
					    message: '创建成功',
					    type: 'success',
					    duration: 2000
					  })
					})
					this.get_sizeList();
				}else{
					updatesize(this.form).then(() => {
					  this.$notify({
					    title: '成功',
					    message: '更新成功',
					    type: 'success',
					    duration: 2000
					  })
					})
					this.get_sizeList();
				}
				this.dialogUpdate = false;
			},
			delServerEdit(index, indexPath) {
				this.$confirm('是否确定删除'+indexPath.size_id+'颜色编码?', '提示', {
					confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'
				}).then(() => {
					// console.log(indexPath.ckey,'indexPath.ckey');
				deletesize({size_id:indexPath.size_id}).then(() => {
				  this.$notify({
				    title: '成功',
				    message: '删除成功',
				    type: 'success'
				  })
				  this.get_sizeList();
				})
				}).catch(() => {
					this.$message({
						type: 'info',message: '已取消删除'
					});
				});
				
			},
		
		},
		created(){
			this.get_sizeList();
		}
	}
</script>

<style>

</style>
